
// 1 成绩录入 ============================================================
/* 
1 查询成绩 
  1 打开页面调用一个函数 发送请求 获取数据 渲染页面
2 修改成绩
  1 双击 单元格 开始修改
    1 找准元素 score类 再去绑定双击事件 有些元素 不需要 双击事件
    2 双击事件触发了
    3 控制单格里的 input 标签显示 即可
    4 控制 input 标签的value 等于 单元里面的内容
    5 控制点击的input标签 获得焦点  focus()
  2 失去焦点 结束修改
    1 给input 标签绑定 失去焦点事件 （不能使用委托事件了 因为只有表单标签有存在失去标签事件）
    2 获取到输入框里面的内容 拼接成参数 发送给后端 完成编辑
    3 后端响应 标记成功
        1 弹出一个提示
        2 重新获取最新的数据
  */

const tbody = document.querySelector('tbody');
// 获取 数据 get 没有参数
function getScoreList() {
    axios.get('/score/list').then((result) => {
        // console.log(result)
        // 判断 业务是否正确
        if (result.data.code === 0) {

            const obj = result.data.data
            // console.log(obj);
            let html = '';
            // 对象 遍历 使用 forin
            for (const key in obj) {
                // console.log(obj[key].name);
                /* html += `
                <tr>
                    <th scope="row">${key}</th>
                    <td>${obj[key].name}</td>
                    <td class="score">${obj[key].score[0]}</td>
                    <td class="score">${obj[key].score[1]}</td>
                    <td class="score">${obj[key].score[2]}</td>
                    <td class="score">${obj[key].score[3]}</td>
                    <td class="score">${obj[key].score[4]}</td>
                </tr>
                `; */

                // html += `<tr> <th scope="row">${key}</th> <td>${obj[key].name}</td></tr>`;
                // 根据成绩 数组来动态生成 多个td标签
                const tempHTML = obj[key].score.reduce(// 拿数组 的数据
                    // (h, v) => h + `<td>${v}</td>`
                    // (h, v) => h + `<td class="score">${v}<input type="text"></td>`
                    (h, v, i) =>
                        h +
                        `<td class="score">${v}  <input type="text" data-batch="${i + 1
                        }"  data-id="${key}" / > </td>`,
                    ''
                );
                // td 标签 的 拼接成完整的 tr
                html += `
                <tr>
                <th scope="row">${key}</th>
                <td>${obj[key].name}</td>
                ${tempHTML}
                </tr>
            `;
            }
            // 把html渲染出来
            tbody.innerHTML = html;

            const inputs = document.querySelectorAll('tbody input'); // 获取tbody里面所有的input 遍历的方式绑定 事件
            inputs.forEach((input) =>
                // 绑定失去焦点事件
                input.addEventListener('blur', function (e) {
                    // input.value
                    // 准备 接口要求的数据
                    const data = {
                        // 学员id
                        stu_id: input.dataset.id,
                        // 成绩的次数
                        batch: input.dataset.batch,
                        // 分数
                        score: input.value,
                    };

                    // 数据校验 通过了 才允许发送给后端   省略

                    // 发送给后端 完成修改
                    axios.post('/score/entry', data).then((result) => {
                        if (result.data.code === 0) {
                            // 提示
                            toastr.success(result.data.message);
                            // 获取最新数据 渲染
                            getScoreList();
                        }
                    });
                })
            );
        };
    });
}

// 渲染页面
getScoreList();

// 双击 单元格 开始修改 =====================================================
// 给分数 单元格绑定双击事件
tbody.addEventListener('dblclick', function (e) {
    const dom = e.target;
    if (dom.nodeName === 'TD' && dom.classList.contains('score')) {
        // console.log('可以修改');
        const input = dom.querySelector('input');
        input.style.display = 'block';

        // 设置 input标签的value 等于当前单元格内的文本
        // console.log(dom.innerHTML); // 获取到可能会包含标签
        // console.log(dom.innerText); // 只获取文本而已
        input.value = dom.innerText;
        // 获得焦点！！！
        input.focus();
    }
});

